How to pass multiple parameters to a POST method using jQuery Ajax in asp.net MVC?

In this article we will discuss to pass multiple parameters from Ajax post call in asp.net MVC application. Before I have faced issues with jQuery ajax post call to a controller with multiple parameter due to syntax errors. Now I have found a way by passing JSON stringifyed Object to a [HttpPost] method.

Step 1: Right click on the "Controllers" folder and add "UserInfo" controller. Copy and paste the following code. Please make sure to include "MVC_tutorials.Models" namespace.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Web;
using System.Web.Mvc;

namespace MVC_tutorials.Controllers
{
    public class UserInfoController : Controller
    {
        //
        // GET: /addition/
        public ActionResult Index()
        {
           return View();
        }

        [HttpPost]
        public ActionResult profile(string name, int age)
        {
            if (Request.IsAjaxRequest())
            {
                return Json(string.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine), JsonRequestBehavior.AllowGet);
            }
            else
            {
               return RedirectToAction("Index");
            }
        }
    }
}

Step 2: Right click on the "Index" action method in the "UserInfoController" and add "Index" view. Copy and paste the following code.

@{
   ViewBag.Title = "passingmultiple parameter using jQuery Ajax";
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnSubmit]").click(function () {
            var dataobject = {};
           dataobject.name = $("#txtName").val();
           dataobject.age = $("#txtAge").val();
           $.ajax({
                type: "POST",
                url: "@Url.Action("profile", "UserInfo", new { area = "" })",
                data: JSON.stringify(dataobject),
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (response) {
                   alert(response);
               }
            });
            return false;
        });
    });
</script>
<style type="text/css">
    .btn {
        font-size: 19px;
        width: 100px;
        height: 45px;
        background: #00BCD4;
        border-style: solid;
        border-color: white;
        color: white;
    }
    .mytextstyle {
       font-size: 19px;
        height: 45px;
        width: 300px;
    }
</style>
<h2 style="color: #FF5722">passing multiple parameter using jQuery Ajax
</h2>
<table style="border: 1px solid #DED8D8; font-size: 19px; width: 500px; padding: 10px; font-family: Arial;">
    <tr>
        <td>Name:
        </td>
        <td>
            <input type="text" id="txtName" class="mytextstyle" value="mohamed rasik" />
        </td>
    </tr>
    <tr>
       <td>Age:
        </td>
        <td>
            <input type="text" id="txtAge" class="mytextstyle" value="27" />
        </td>
    </tr>
    <tr>
        <td>&nbsp;
        </td>
        <td style="padding-left: 50px">
            <input type="submit" id="btnSubmit" class="btn" value="Submit" />
        </td>
    </tr>
</table>

 Output:

Video tutorial: